# Getting Started

Floating UI is a tiny, low-level library for creating "floating"
elements like tooltips, popovers, dropdowns, menus, and more.

The library provides two key functionalities:

### 1. Anchored positioning primitives

CSS is currently missing a feature called “anchored positioning”
— the ability to anchor an element (like a tooltip) to another
one (like a button) while simultaneously keeping it in view as
best as possible by avoiding clipping and overflow.

Attempting to do fully dynamic anchored positioning with today’s
plain CSS is not possible. Floating UI provides a JavaScript
implementation of this feature.

### 2. User interaction primitives

When creating a popover, dropdown menu, select, or combobox
component that follows WAI-ARIA authoring practices, the
complexity increases dramatically. Focus traps, indexed
navigation, and typeahead are difficult to get right.

This functionality is currently available for React DOM but will
be made agnostic in the future.

## Install

Choose the package that suits you.

### Vanilla DOM positioning engine

Use with vanilla JavaScript or a non-React framework
([view tutorial](/docs/tutorial)).

```shell
npm install @floating-ui/dom
```

### React DOM positioning engine

Use with React DOM ([view docs](/docs/react-dom)).

```shell
npm install @floating-ui/react-dom
```

### React DOM interactions and positioning engine

Primitive hooks and components, in addition to the positioning
engine, to use with React DOM
([view docs](/docs/react-dom-interactions)).

```shell
npm install @floating-ui/react-dom-interactions
```

### React Native positioning engine

Use with React Native ([view docs](/docs/react-native)).

```shell
npm install @floating-ui/react-native
```

### Canvas or other platforms

Learn about creating a [Platform](/docs/platform).

```shell
npm install @floating-ui/core
```

## CDN

<details>
  <summary>View details</summary>

Floating UI can be loaded via CDN using ESM or UMD format.

### ESM

```js
// development
import {computePosition} from 'https://cdn.skypack.dev/@floating-ui/dom@__DOM_VERSION__';

// production
import {computePosition} from 'https://cdn.skypack.dev/@floating-ui/dom@__DOM_VERSION__?min';
```

### UMD

```html
<script src="https://unpkg.com/@floating-ui/core@__CORE_VERSION__"></script>
<script src="https://unpkg.com/@floating-ui/dom@__DOM_VERSION__"></script>
```

All exports will be available on `window.FloatingUIDOM{:js}`.

</details>

## Package entry points

> Using webpack, Vite, or Parcel? Skip this section as modern
> bundlers handle this for you.

Floating UI uses `process.env.NODE_ENV{:js}` to determine whether
your build is in development or production mode. This allows us
to add console warnings and errors during development to help you
but ensure they get stripped out in production to keep the bundle
size small.

This causes an error in Rollup and low/no-build setups. To solve
this, Floating UI exports browser-ready ES modules. Leverage the
"browser" package export condition to use these modules.

<details>
  <summary>Rollup example</summary>

The `browser{:.objectKey}` option in the `nodeResolve(){:js}`
plugin will select browser versions of packages if available.

```js
import {nodeResolve} from '@rollup/plugin-node-resolve';

export default {
  // ...
  plugins: [
    nodeResolve({
      browser: true,

      // Add this line for development config, omit for
      // production config
      exportConditions: ['development'],
    }),
  ],
};
```

</details>
